<template>
    <view class="content">
        <hx-navbar :config="config" />
        <view class="product">
            <view class="product-box">
                <view class="order-content">
                    <view class="order-box">

                        <view class="order-box-cont" style="align-items: center;">
                            <view style="display: flex;flex-direction: column;width: 15%;padding-right: 3rpx;">
                                <text>产品名称：</text>
                            </view>
                            <view>
                                <input class="uni-input" v-model="product_name" focus placeholder="请填写产品名称" />
                            </view>
                        </view>
                        <view class="order-box-cont" style="align-items: center;">
                            <view style="display: flex;flex-direction: column;width: 15%;padding-right: 3rpx;">
                                <text>产品数量：</text>
                            </view>
                            <view>
                                <input class="uni-input" v-model="product_num" focus placeholder="请填写产品数量" />
                            </view>
                        </view>
                        <view class="order-box-cont" style="align-items: center;">
                            <view style="display: flex;flex-direction: column;width: 15%;padding-right: 3rpx;">
                                <text>产品型号：</text>
                            </view>
                            <view>
                                <picker class="uni-input" mode="selector" :range="productModelList" range-key="name"
                                    @change="onSelectedChange">
                                    <view>{{ product_model ? product_model : '请选择' }}</view>
                                </picker>
                            </view>
                        </view>

                        <view class="order-box-cont" style="align-items: center;">
                            <view style="display: flex;flex-direction: column;width: 15%;padding-right: 3rpx;">
                                <text>产品备注：</text>
                            </view>
                            <view>
                                <input class="uni-input" v-model="remark" focus placeholder="请填写产品备注" />
                            </view>
                        </view>

                        <view style="display: flex;">
                            <view style="width: 15%;"></view>
                            <view style="width: 25%;">
                                <button type="primary"
                                    style="width: 160rpx;height: 64rpx;text-align: center;line-height: 64rpx;font-size: 32rpx;"
                                    @click="subClick">提交</button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import {
        orderProductAddSub,
        getProductModel
    } from '@/common/api/order.js'
    import settings from '@/common/settings.js'
    export default {
        data() {
            return {
                config: {
                    back: true,
                    title: '新增交付内容',
                    color: '#ffffff',
                    //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
                    backgroundColor: [1, ['#6970ff', '#6970ff']],
                    // 状态栏 ，数组则为滑动变色
                    statusBarBackground: ['', '#ffffff'],
                },
                id: "",
                productModelList: [],
                product_name: "",
                product_num: "",
                product_model: "",
                remark: ""
            }
        },
        onLoad(options) {
            this.id = options.id
            this.getProductModelList()
        },
        methods: {
            onSelectedChange(e) {
                console.log(e)
                this.product_model = this.productModelList[e.detail.value].name;
                this.remark = this.productModelList[e.detail.value].remark;
            },
            getProductModelList() {
                getProductModel().then((res) => {
                    this.productModelList = res
                }).catch((err) => {

                });
            },
            subClick() {
                let _this = this;

                if (!_this.product_name) {
                    uni.showToast({
                        title: '请填写产品名称',
                        icon: 'none'
                    });
                    return false;
                }

                if (!_this.product_num) {
                    uni.showToast({
                        title: '请填写产品数量',
                        icon: 'none'
                    });
                    return false;
                }

                if (!_this.product_model) {
                    uni.showToast({
                        title: '请填写产品模型',
                        icon: 'none'
                    });
                    return false;
                }
                orderProductAddSub({
                    order_id: _this.id,
                    product_name: _this.product_name,
                    product_num: _this.product_num,
                    product_model: _this.product_model,
                    remark: _this.remark
                }).then((res) => {
                    uni.navigateBack({
                        delta: 1 // 返回的页面层级，1 表示返回上一级页面
                    });
                }).catch((err) => {

                });

            }
        }
    }
</script>

<style>
    page {
        background: #f5f5f5;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .product {
        display: flex;
        flex-direction: column;
        width: 100%;

    }

    .order-info {
        width: 100%;
        margin-top: 20rpx;
    }

    .product-box {
        background: #fff;
        margin: 10rpx 20rpx;
        display: flex;
        flex-direction: column;
        border-radius: 10rpx;
        padding: 20rpx;
    }

    .order-content {
        display: flex;
        justify-content: space-between;
        font-size: 20rpx;
    }

    .order-box {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .order-box-cont {
        display: flex;
        margin-bottom: 20rpx;
    }

    .order-box-cont view:first-of-type {
        width: 15%;
    }

    .order-box-cont view:last-of-type {
        width: 80%;

    }

    .order-option {
        display: flex;
        justify-content: flex-end;
    }

    .order-btn {
        padding: 6rpx 30rpx;
        font-size: 20rpx;
        border: 1rpx solid #d5d5d5;
        border-radius: 30rpx;
        margin-left: 10rpx;
    }


    .order-btn-check {
        color: #aaaa00;
        border-color: #aaaa00;
    }

    .order-btn-sc {
        color: #00aaff;
        border-color: #00aaff;
    }

    .order-line {
        border-top: 1rpx solid #f5f5f5;
        margin: 15rpx 0;
    }


    .contract-url {
        width: 75%;
    }

    .contract-url view {
        display: flex;
        flex-direction: column;
    }

    .contract-url-cont text:first-of-type {
        width: 100%;
    }

    .contract-url-image {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .order-image {
        margin: 0 10rpx 10rpx 0;
        width: 80rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .order-image image {
        width: 80rpx;
        height: 80rpx;
    }

    .order-image text {
        width: 80rpx;
        text-align: center;
        color: red;
        border: 1rpx solid red;
        padding: 5rpx 0;
        border-radius: 7rpx;
        margin-top: 5rpx;
    }


    .btn-default-img {
        width: 60rpx;
        height: 60rpx;
        margin-right: 10rpx;
    }

    .uni-input {
        border-bottom: 1rpx solid #f1f1f1;
        padding: 5rpx;

    }

    .url-preview-del {
        display: flex;
        flex-direction: row !important;
        width: 100%;
        margin-top: 15rpx;
    }

    .pdf-link {
        width: 20%;
        color: #6970ff;
        text-decoration: underline;
    }

    .pdf-link-del {
        width: 20%;
        color: #ff0000;
        text-decoration: underline;
    }
</style>